<template>
  <teleport to="body">
    <div class="fixed top-20 right-4 z-[9999] w-[calc(100vw-2rem)] max-w-sm">
      <TransitionGroup name="toast" tag="div" class="space-y-3">
        <div
          v-for="t in toasts"
          :key="t.id"
          :class="[
            'flex items-start gap-3 px-4 py-3 rounded-lg shadow-lg backdrop-blur-md border text-sm',
            typeClasses[t.type]
          ]"
        >
          <div class="shrink-0 mt-0.5">
            <span :class="['inline-block w-2 h-2 rounded-full', dotClasses[t.type]]"></span>
          </div>
          <div class="flex-1 leading-relaxed">{{ t.message }}</div>
          <button
            v-if="t.dismissible"
            class="shrink-0 opacity-70 hover:opacity-100 transition"
            @click="remove(t.id)"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </TransitionGroup>
    </div>
  </teleport>
  </template>

<script setup lang="ts">
const { toasts, remove } = useToast();

const typeClasses: Record<string, string> = {
  success: 'bg-emerald-700/20 border-emerald-500/30 text-emerald-100',
  error: 'bg-red-700/20 border-red-500/30 text-red-100',
  warning: 'bg-amber-700/20 border-amber-500/30 text-amber-100',
  info: 'bg-sky-700/20 border-sky-500/30 text-sky-100'
};

const dotClasses: Record<string, string> = {
  success: 'bg-emerald-400',
  error: 'bg-red-400',
  warning: 'bg-amber-400',
  info: 'bg-sky-400'
};
</script>

<style scoped>
.toast-enter-from {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
}
.toast-enter-active {
  transition: all 160ms ease-out;
}
.toast-leave-to {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
}
.toast-leave-active {
  transition: all 160ms ease-in;
}
</style>

